<template>
  <div>
    <div ref="chartsEl" style="width: 100%; height: 90vh;"></div>
    <img
      style="display: none"
      src="https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1718940162942_94e32e29.png"
      id="sticker"
      alt=""
    />
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import "echarts-gl";
import mapJson from "@/components/AplidCharts/data/config";
const pageReload: any = inject("reload");

const router = useRouter();
const route = useRoute();
const mapname = ref(route.query.name || "nanjing");
const chartsEl = ref(null);
let myChart = null;

const renderChart = (mapName) => {
  if (!myChart) return;
  if (mapJson[mapName]) {
    echarts.registerMap(mapName, mapJson[mapName]);
  } else {
    echarts.registerMap("nanjing", mapJson["nanjing"]);
  }

  let option = {
    geo3D: {
      map: mapName, //注册地图的名字
      shading: "realistic",
      // environment:
      //   "https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1718940162942_94e32e29.png",
      groundPlane: {
        show: false,
      },
      realisticMaterial: {
        detailTexture: document.getElementById("sticker"),
        textureTiling: 1,
      },
      roam: true, //开启鼠标缩放和平移漫游。默认不开启
      // colorMaterial: {
      //   detailTexture: mapPatternImg,
      //   textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
      // },
      tooltip: {
        show: true,
        trigger: "axis",
      },
      itemStyle: {
        color: "rgba(12, 72, 121, 0.8)",
        opacity: 1,
        borderWidth: 0.4,
        borderColor: "#00FFF8", // 地图边配色
      },
      //当鼠标放上去  地区区域是否显示名称
      emphasis: {
        itemStyle: {
          color: "rgba(12, 72, 121, 0.2)",
        },
        label: {
          show: true,
        },
      },
      shading: "lambert",
      //光照阴影
      light: {
        //光照阴影
        main: {
          color: "#fff", //光照颜色
          intensity: 1.2, //光照强度
          shadowQuality: "high", //阴影亮度
          shadow: true, //是否显示阴影
          alpha: 60,
          beta: 10,
        },
        ambient: {
          intensity: 0.6,
        },
      },
      //用于鼠标控制地图旋转等功能
      viewControl: {
        // 用于鼠标的旋转，缩放等视角控制。
        projection: "perspective", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
        autoRotate: true, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
        autoRotateDirection: "cw", // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
        autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
        rotateSensitivity: 10, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。   rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
        zoomSensitivity: 10, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
        panSensitivity: 10, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
        panMouseButton: "left", // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
        rotateMouseButton: "left", // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)

        distance: 250, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
        minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
        maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。

        alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
        beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
        minAlpha: -720, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        maxAlpha: 720, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        minBeta: -720, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        maxBeta: 720, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]

        center: [0, -50, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。左右 上下 前后

        animation: true, // 是否开启动画。[ default: true ]
        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
      },
      //修改选中区域的样式
      regions: [
        {
          name: "鼓楼区",
          height: 6, //修改选中区域的三维高度
          selected: false,
          select: {
            areaColor: "#f00",
            color: "red",
          },
          itemStyle: {
            realisticMaterial: {
              detailTexture: document.getElementById("sticker"),
              textureTiling: 1,
            },
          },
          index: 0,
        },
      ],

      silent: false,
      regionHeight: 4, //修改整个地图的三维高度
    },
    xAxis3D: {
      type: "value", // X 轴的类型，可以根据需要设置
      // 其他 xAxis3D 的配置项...
    },
    zAxis3D: {
      type: "value", // X 轴的类型，可以根据需要设置
      // 其他 xAxis3D 的配置项...
    },
    yAxis3D: {
      type: "value", // X 轴的类型，可以根据需要设置
      // 其他 xAxis3D 的配置项...
    },
    series: [
      {
        type: "bar3D",
        name: "beijing",
        coordinateSystem: "geo3D", //这个属性是配合bar的数据的，barData用的是经纬度
        // 倒角尺寸
        // bevelSize: .5,
        // bevelSmoothness: 20,
        data: [
          {
            name: "鼓楼区",
            value: [118.769943, 32.066814, 323],
          },
        ],
        color: "#EC691A",
        minHeight: 5,
        barSize: 1.5,
        animation: true,
        animationDurationUpdate: 2000,
      },
    ],
  };
  myChart.setOption(option);
  myChart?.resize();
  // 防止多次触发click事件，重要！！！
  // myChart.off("click");
  // 下钻
  myChart.on("click", (params) => {
    console.log("dd");
    handleRefreshMap(params.name);
  });
};

const handleRefreshMap = (name) => {
  mapname.value = name;

  router.replace({
    path: "/nx/index",
    query: {
      name: name,
    },
  });
  setTimeout(() => {
    pageReload();
    renderChart(name);
  }, 0);
};

const initChart = () => {
  myChart = echarts.init(chartsEl.value);
  renderChart(mapname.value);
};

onMounted(() => {
  initChart();
});
</script>

<style scoped></style>
